*{-webkit-tap-highlight-color:rgba(0,0,0,0);outline:0}
body,p,ul,h1,h2,h3,h4,h5,h6,th,td{margin:0;padding:0}
th{font-weight:400}
li{list-style:none}
a{text-decoration:none}
body{font-family: '华文细黑', sans-serif;font-size:14px;background:#fff}
body.no-scroll{height:100%;overflow-y:hidden;overflow-x:hidden}
.hide{display:none!important}
.btn{display:block;font-size:16px;line-height:39px;text-align:center;border:1px solid;border-radius:2px}
.btn.btn-normal{color:#666;border-color:#ccc}
.btn.btn-primary{color:#fff;background-color:#f63;border-color:#f63}
.btn.disabled{opacity:.4}
.ticket-info{padding:25px 15px 30px;margin-bottom:7px;background:#fff}
.ticket-info .graph{position:relative;height:74px;padding-top:80px;margin-bottom:15px;background:no-repeat center top;-webkit-background-size:auto 100%;background-size:auto 100%}
.ticket-info .graph-container{position:relative;text-align:center;margin-bottom:20px}
.ticket-info .graph-container img.background{width:80%;}
.ticket-info .graph-container .text{position:absolute;width:100%;left:0;bottom:35px}
.ticket-info .graph,.ticket-info .graph-container{color:#b63a14}
.ticket-info .graph .title,.ticket-info .graph-container .title{text-align:center;margin-bottom:5px;line-height:1.3;font-size:24px}
.ticket-info .graph .amount,.ticket-info .graph-container .amount{text-align:right;line-height:1;}
.ticket-info .graph .amount:before,.ticket-info .graph-container .amount:before{display:inline-block;content:'\FFE5';}
.double .amount:before{margin-right: -15px;}
.other .amount:before{margin-right: -8px;}
.ticket-info .graph .desc,.ticket-info .graph-container .desc{text-align:center}
.ticket-info .graph .title+.desc,.ticket-info .graph-container .title+.desc{font-size:12px}
.ticket-info h1{margin-top:5px;margin-bottom:5px;font-size:16px;line-height:1.4;color:#333;text-align:center}
.ticket-info h1 span{color:#ff6634}
.ticket-info p{font-size:13px;line-height:1.5;color:#666;text-align:center}
.ticket-info .actions{margin-top:25px;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}
.ticket-info .actions .btn{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;width:120px;margin-left:10px}
.ticket-info .actions .btn:first-child{margin-left:0}
.ticket-info .remark{font-size:13px;line-height:1.5;color:#f63;text-align:center;margin:20px 0 0}

/* 竖屏 */
@media all and (orientation : portrait){
    .ticket-info .bottom{ position: absolute; bottom: 30px; }
}

@media all and (orientation : portrait) and (max-width: 320px) {
    .ticket-info .graph-container .text{
        bottom: 30px;
    }

    .ticket-info .graph .amount,.ticket-info .graph-container .amount{
        font-size:56px; padding-right:50px;
    }

    .ticket-info .graph .amount:before,.ticket-info .graph-container .amount:before{
        font-size:28px
    }

    .double .graph-container .text{
        bottom: 30px;
    }

    .double .graph-container .amount{
        padding-right:38px;
    }

    .other .graph-container .amount{
        padding-right: 35px;
    }
}

@media all and (orientation : portrait) and (min-width: 321px) and (max-width: 375px) {
    .ticket-info .graph-container .text{
        bottom: 40px;
    }

    .ticket-info .graph .amount,.ticket-info .graph-container .amount{
        font-size:65px; padding-right:60px;
    }

    .ticket-info .graph .amount:before,.ticket-info .graph-container .amount:before{
        font-size:32px
    }

    .double .graph-container .text{
        bottom: 35px;
    }

    .double .graph-container .amount{
        padding-right:45px;
    }

    .other .graph-container .amount{
        padding-right: 40px;
    }

}

@media all and (orientation : portrait) and (min-width: 376px) and (max-width: 480px) {
    .ticket-info .graph-container .text{
        bottom: 40px;
    }

    .ticket-info .graph .amount,.ticket-info .graph-container .amount{
        font-size:65px; padding-right:65px;
    }

    .ticket-info .graph .amount:before,.ticket-info .graph-container .amount:before{
        font-size:34px
    }

    .double .graph-container .text{
        bottom: 45px;
    }

    .double .graph-container .amount{
        padding-right:55px;
    }

    .other .graph-container .amount{
        padding-right: 50px;
    }

}

/* 横屏 */
@media all and (orientation : landscape) and (max-width: 480px) {
    .ticket-info .graph-container .text{
        bottom: 50px;
    }

    .ticket-info .graph .amount,.ticket-info .graph-container .amount{
        font-size:80px; padding-right:75px;
    }

    .ticket-info .graph .amount:before,.ticket-info .graph-container .amount:before{
        font-size:34px
    }

    .double .graph-container .amount{
        padding-right:60px;
    }

    .other .graph-container .amount{
        padding-right: 57px;
    }
}

@media all and (orientation : landscape) and (min-width: 490px) and (max-width: 568px) {
    .ticket-info .graph-container .text{
        top: 80px;
    }

    .ticket-info .graph .amount,.ticket-info .graph-container .amount{
        font-size:80px; padding-right:95px;
    }

    .ticket-info .graph .amount:before,.ticket-info .graph-container .amount:before{
        font-size:38px
    }

    .double .graph-container .amount{
        padding-right:90px;
    }

    .other .graph-container .amount{
        padding-right: 87px;
    }
}

@media all and (orientation : landscape) and (min-width: 569px) and (max-width: 667px) {
    .ticket-info .graph-container .text{
        top: 100px;
    }

    .ticket-info .graph .amount,.ticket-info .graph-container .amount{
        font-size:80px; padding-right:125px;
    }

    .ticket-info .graph .amount:before,.ticket-info .graph-container .amount:before{
        font-size:38px
    }

    .double .graph-container .amount{
        padding-right:110px;
    }

    .other .graph-container .amount{
        padding-right: 105px;
    }
}

@media all and (orientation : landscape) and (min-width: 668px) and (max-width: 736px) {
    .ticket-info .graph-container .text{
        top: 100px;
    }

    .ticket-info .graph .amount,.ticket-info .graph-container .amount{
        font-size:120px; padding-right:125px;
    }

    .ticket-info .graph .amount:before,.ticket-info .graph-container .amount:before{
        font-size:48px
    }

    .double .graph-container .amount{
        padding-right:110px;
    }

    .other .graph-container .amount{
        padding-right: 100px;
    }
}

@media all and (orientation : landscape) and (max-height: 480px) {
    .ticket-info .bottom{ margin: 60px 0 0; }
}